<!--
 * @Author: windys
 * @Description: 付费课程
 * @Date: 2022-03-08 15:53:45
-->
<template>
  <van-dialog
    v-model:show="show"
    title="该内容为付费资源"
    :show-confirm-button="false"
  >
    <div class="content_send" v-if="isHaveSend">
      <div class="item" v-for="item in list" :key="item.id">
        <div class="left">
          <van-image :src="item.coverUrl" width="120" radius="5px" />
        </div>
        <div class="right">
          <div class="titile">{{ item.goodsName }}</div>
          <div class="days">{{ item.days }}有效期</div>
          <div class="sp">
            <van-image
              :src="item.coverUrl"
              width="25"
              height="25"
              round
              fit="contain"
            />
            <span>{{ item.spName }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <van-button
        type="primary"
        size="small"
        plain
        round
        block
        @click="show = false"
        >取消</van-button
      >
      <van-button type="danger" size="small" round block @click="handleBuy"
        >购买</van-button
      >
    </div>
  </van-dialog>
</template>



<script >
import { defineComponent, ref, watch } from "vue";
import { getSendGoodsList } from "@/api/live";
import { buyCrouse } from "@/api/crouse";
import { useRoute } from "vue-router";
import { Toast } from "vant";
export default defineComponent({
  setup() {
    const show = ref(false);
    const list = ref([]);
    const route = useRoute();
    const isHaveSend = ref(false);
    watch(
      () => show.value,
      (v) => {
        if (v) {
          init();
        }
      }
    );
    const init = async (id) => {
      const res = await getSendGoodsList({
        subjectId: route.query.courseId,
        pageIndex: 1,
        pageSize: 10,
      });
      if (res && res.length) {
        isHaveSend.value = true;
        list.value = res;
      } else {
        isHaveSend.value = false;
      }
    };
    const handleBuy = async () => {
      const res = await buyCrouse({ courseId: route.query.courseId });
      if (typeof res == "object") {
        show.value = false;
        Toast.success("购买成功！");
      }
    };
    return {
      show,
      list,
      isHaveSend,
      handleBuy,
    };
  },
});
</script>



<style lang="scss" scoped>
.footer {
  justify-content: center;
  display: flex;
  padding: 20px 0;
  button {
    width: 100px;
    margin: 0 10px;
  }
}
.content_send {
  margin: 10px;
  font-size: 12px;
  min-height: 100px;
  max-height: 300px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  margin-top: 30px;
  .item {
    height: 80px;
    overflow: hidden;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    position: relative;
    .left {
      width: 120px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .days {
      color: #ff7b00;
      text-align: right;
      border: 1px solid #ff7b00;
      display: inline;
      padding: 2px 5px;
      border-radius: 15px;
      position: absolute;
      font-size: 10px;
      right: 0;
      top: 30px;
    }
    .right {
      width: calc(100% - 120px);
      .titile {
        font-size: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      .sp {
        display: flex;
        height: 30px;
        align-items: center;
        margin-top: 25px;
        span {
          font-size: 12px;
          color: #999;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
